<template>
  <ul class="myMsite">
    <li v-for="(item,index) in list" :key="index" @click="$router.push(`/detail/${item.id}`)">
        <img :src="'https://elm.cangdu.org/img/'+item.image_path" alt="">
        <section>
           {{item.name}}
        </section>
    </li>
  </ul>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  props:{
    list: Array
  },
  setup() {},
};
</script>
<style lang="scss" scoped>
.myMsite{
  height: calc(100% - 50px);
  overflow: auto;
  li{
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #e9e9e9;
    align-items: center;
    img{
      width: 80px;
    }
    section{
      flex: 1;
      margin-left: 10px;
    }
  }
}
</style>